<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<style>
		body{
			background-color: #dadada
		}
		#container{
			background-color: white;
			margin: 0 auto;
			max-width: 420px;
		}
	</style>
	<body id="news">
		<div class="container-fluid" id="container">
			<div class="row-fluid">
				<div class="span12">
					<div class="carousel slide" id="carousel-595701">
						<ol class="carousel-indicators">
							<li class="active" data-slide-to="0" data-target="#carousel-595701">
							</li>
							<li data-slide-to="1" data-target="#carousel-595701">
							</li>
							<li data-slide-to="2" data-target="#carousel-595701">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="item active">
								<img alt="" src="img/1.jpg" />
								<div class="carousel-caption">
									<h4 v-text="news?news[0].title:''"></h4>
									<p>
										{{news?news[0].desc:''}}
									</p>
								</div>
							</div>
							<div class="item">
								<img alt="" src="img/1.jpg" />
								<div class="carousel-caption">
									<h4>{{news?news[1].title:''}}</h4>
									<p>
										{{news?news[1].desc:''}}
									</p>
								</div>
							</div>
							<div class="item">
								<img alt="" src="img/1.jpg" />
								<div class="carousel-caption">
									<h4>{{news?news[2].title:''}}</h4>
									<p>
										{{news?news[2].desc:''}}
									</p>
								</div>
							</div>
						</div>
						<a data-slide="prev" href="#carousel-595701" class="left carousel-control">‹</a>
						<a data-slide="next" href="#carousel-595701" class="right carousel-control">›</a>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span6">
					<form class="form-search">
						<input class="input-medium search-query" placeholder="search news" v-model="search" type="text" />
					</form>
				</div>
				<div class="span6">
					<div class="btn-group">
						<button class="btn" type="button" @click="sort=-sort"><em class="icon-align-left"></em></button> <button class="btn" type="button"><em class="icon-align-center"></em></button> <button class="btn" type="button"><em class="icon-align-right"></em></button> <button class="btn" type="button"><em class="icon-align-justify"></em></button>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div class="accordion" id="accordion-483788" v-for="new in news|limitBy 3 page|filterBy search|orderBy 'pubDate' sort">
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-483788" href="#accordion-element-676201">{{new.title}}</a>
							</div>
							<div id="accordion-element-676201" class="accordion-body in collapse">
								<div class="accordion-inner">
									{{new.desc}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div class="pagination">
						<ul>
							<li>
								<a @click="pre()">上一页</a>
							</li>
							<li>
								<a @click="pagination(1)">1</a>
							</li>
							<li>
								<a @click="pagination(2)">2</a>
							</li>
							<li>
								<a @click="pagination(3)">3</a>
							</li>
							<li>
								<a @click="pagination(4)">4</a>
							</li>
							<li>
								<a @click="pagination(5)">5</a>
							</li>
							<li>
								<a @click="pagination(6)">6</a>
							</li>
							<li>
								<a @click="next()">下一页</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script>
		var news = new Vue({
			el: '#news',
			data: {
				name: 'wscat',
				news: '',
				page: 0,
				search: '',
				sort: -1
			},
			methods: {
				getNews: function() {
					var self = this;
					$.ajax({
						type: "get",
						url: "js/news.json",
						async: true,
						data: {
							page: 1,
							channelId: '5572a109b3cdc86cf39001db',
							channelName: '国内最新',
						},
						success: function(data) {
							self.news = data.showapi_res_body.pagebean.contentlist;
							console.log(self.news);
						}
					});
				},
				pagination: function(page) {
					this.page = 3 * (page - 1);
				},
				pre: function() {
					if(this.page == 0) {
						this.page = 0
					} else {
						this.page -= 3
					}
				},
				next: function() {
					console.log(this.news.length);
					console.log(this.page)
					if(this.page + 3 > this.news.length) {
						this.page;
					} else {
						this.page += 3
					}
				}
			},
			ready: function() {
				this.getNews();
			}
		})
	</script>

</html>